<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()
//头部导航栏返回点击事件
let back = () => {
    router.push('/')
}
//头部导航栏计时器
let min = ref<number>(0)
let second = ref<number>(0)
let timer: null | number = null
let active = ref<boolean>(true)
//计时器
const startTime = () => {
    timer = setInterval(() => {
        second.value++
        if (second.value >= 60) {
            min.value++
            second.value = 0
        }
    }, 1000)
}
//启动或者停止计时器点击事件
let startOrStop = () => {
    active.value = !active.value
    if (timer) {
        clearInterval(timer)
        timer = null
    } else {
        startTime()
    }
}

onMounted(() => {
    startTime()

})
onBeforeUnmount(() => {
    if (timer) {
        clearInterval(timer)
    }
})
//定义选项卡选中值
let changeAnswer = ref([])
console.log(changeAnswer.value);


//控制底部答题卡图标变化
let answerIcon = ref<boolean>(true)
//底部导航栏top部分点击事件
let answerShow = () => {
    answerIcon.value = !answerIcon.value
}
//底部导航栏top部分答题和未答数量计算
let answerCount = computed(() => {
    let answer = 0
    let noAnswer = 0
    questionList.value.forEach(item => {
        if (changeAnswer.value[item.id]) {
            answer++
        } else {
            noAnswer++
        }
    })
    return { answer, noAnswer }
})
//底部导航栏bottom部分点击事件 查找当前题目
let findQuestion = (id: number) => {
    //获取当前题目索引
    let index = questionList.value.findIndex(item => item.id === id)
    //获取当前题目元素
    const element = document.querySelector(`[data-question-id="${id}"]`) as HTMLElement
    //滚动到当前题目并且滚动到顶部并且高亮
    if (element) {
        element.scrollIntoView({
            block: 'start',
            behavior: 'smooth'
        })
        // 高亮当前题目
        element.classList.add('question-active')
        setTimeout(() => {
            element.classList.remove('question-active')
        }, 500)
    }
}
//底部导航栏btn按钮根据答题id是否高亮
const isActive = (id: number) => {
    if (changeAnswer.value[id]) {
        return true
    }
}

// 模拟数据
const questionList = ref([
    {
        id: 1,
        title: '1. 下列哪个类是线程安全的动态数组？ ( )',
        options: [
            { id: 1, content: 'A.ArrayList' },
            { id: 2, content: 'B.LinkedList' },
            { id: 3, content: 'C.Vector' },
            { id: 4, content: 'D.HashSet' },
        ]
    }
    ,
    {
        id: 2,
        title: '2. 以下哪种集合类不能存储重复的元素？',
        options: [
            { id: 1, content: 'A.ArrayList' },
            { id: 2, content: 'B.LinkedList' },
            { id: 3, content: 'C.Vector' },
            { id: 4, content: 'D.HashSet' },
        ]
    }
    ,
    {
        id: 3,
        title: '3. 以下哪种集合类不能存储重复的元素？',
        options: [
            { id: 1, content: 'A.ArrayList' },
            { id: 2, content: 'B.LinkedList' },
            { id: 3, content: 'C.Vector' },
            { id: 4, content: 'D.HashSet' },
        ]
    }
    ,
    {
        id: 4,
        title: '4. 以下哪种集合类不能存储重复的元素？',
        options: [
            { id: 1, content: 'A.ArrayList' },
            { id: 2, content: 'B.LinkedList' },
            { id: 3, content: 'C.Vector' },
            { id: 4, content: 'D.HashSet' },
        ]
    }
    ,
    {
        id: 5,
        title: '5. 以下哪种集合类不能存储重复的元素？',
        options: [
            { id: 1, content: 'A.ArrayList' },
            { id: 2, content: 'B.LinkedList' },
            { id: 3, content: 'C.Vector' },
            { id: 4, content: 'D.HashSet' },
        ]
    }
])
</script>
<template>
    <!-- 头部导航栏 -->
    <el-row style="margin-bottom: 20px;">
        <div class="answer-top">
            <div class="answer-top-left" @click="back">
                <el-icon style="vertical-align: middle;">
                    <Back />
                </el-icon>
                <span>退出答题</span>
            </div>
            <h4>java热门面试题200道-在线测试</h4>
            <div>
                <el-button :disabled="changeAnswer.filter(item => item).length != questionList.length">交卷</el-button>
                <el-button @click="startOrStop">计时{{ active ? '开始' : '暂停' }}{{ min.toString().padStart(2, '0') }}:{{
                    second.toString().padStart(2, '0') }}</el-button>
            </div>
        </div>
    </el-row>
    <!-- 答题内容栏 -->
    <div class="answer-content">
        <div class="answer-content-item" v-for="item in questionList" :key="item.id" :data-question-id="item.id">
            <h1>{{ item.title }}</h1>
            <el-radio-group class="answer-radio" v-model="changeAnswer[item.id]">
                <el-radio v-for="value in item.options" :key="value.id" :value="value.id">{{ value.content }}</el-radio>
            </el-radio-group>
        </div>
        <el-button class="answer-submit" size="large"
            :disabled="changeAnswer.filter(item => item).length != questionList.length">交卷</el-button>
    </div>
    <!-- 底部导航栏 -->
    <div class="answer-bottom ">
        <div class="answer-bottom-top">
            <div class="answer-bottom-top-left" @click="answerShow">
                答题卡
                <el-icon>
                    <component :is="answerIcon ? 'ArrowDown' : 'ArrowUp'"></component>
                </el-icon>
            </div>
            <div class="answer-bottom-top-right">
                <div>
                    <el-icon>
                        <CircleCheckFilled />
                    </el-icon>
                    <span>已答{{ answerCount.answer }}</span>
                </div>
                <div>
                    <el-icon>
                        <CircleCloseFilled />
                    </el-icon>
                    <span>未答{{ answerCount.noAnswer }}</span>
                </div>
            </div>
        </div>
        <div class="answer-bottom-bottom" v-show="answerIcon">
            <el-button round v-for="item in questionList" :key="item.id" @click="findQuestion(item.id)"
                :class="{ 'btn-active': isActive(item.id) }">{{ item.id
                }}</el-button>
        </div>
    </div>
    <!-- dialog弹出框 -->
    <div v-show="active === false" class="dialog">
        <div class="dialog-content">
            <p>答题已暂停</p>
            <div class="dialog-time">{{ min.toString().padStart(2, '0') }}:{{ second.toString().padStart(2, '0') }}
            </div>
            <button @click="startOrStop">
                <el-icon>
                    <Check />
                </el-icon>继续答题
            </button>
        </div>
    </div>
</template>
<style scoped lang="scss">
.answer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px 20px;

    .answer-top-left {
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
            color: #409eff;
        }
    }
}

.answer-content {
    width: 80%;
    box-sizing: border-box;
    padding: 20px 20px;
    margin: 10px auto;
    background-color: #fff;

    .answer-content-item {
        margin-top: 20px;
        box-sizing: border-box;
        padding: 5px 10px;

        .answer-radio {
            flex-direction: column;
            margin-left: 20px;
            margin-top: 10px;
            align-items: flex-start;

            .el-radio {
                margin: 5px 0;

                .el-radio__label {
                    font-size: 20px;
                }
            }
        }
    }

    .answer-submit {
        display: block;
        margin: 100px auto;
    }

}

.question-active {
    background-color: #ccdcf5;
    //淡入淡出
    transition: all 0.5s ease-in-out;

}

.answer-bottom {
    position: fixed;
    bottom: 40px;
    left: 10%;
    right: 10%;

    .answer-bottom-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 260px;
        padding: 12px 16px;
        background-color: #fff;
        box-sizing: border-box;
        box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1);


        .answer-bottom-top-left {
            display: flex;
            align-items: center;
            cursor: pointer;

            &:hover {
                color: #1890ff
            }
        }

        .answer-bottom-top-right {
            margin-left: 20px;
            display: flex;
            align-items: center;


            div {
                display: flex;
                align-items: center;
                margin: 0 10px;

                span {
                    margin-left: 4px;
                }
            }
        }
    }

    .answer-bottom-bottom {
        background-color: #fff;
        display: flex;
        box-sizing: border-box;
        padding: 16px;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    }
}

.btn-active {
    background-color: #409EFF;
    color: white;
    border: none;
}

// dialog弹出框
.dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px); //模糊
    z-index: 98;

    .dialog-content {
        width: 320px;
        background-color: rgba(0, 0, 0, .2);
        border-radius: 10px;
        padding: 30px;
        box-sizing: border-box;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .2);

        p {
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 40px;
        }

        .dialog-time {
            background-color: rgba(0, 0, 0, .2);
            border-radius: 12px;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
            color: #fff;
            font-size: 48px;

        }

        button {
            display: flex;
            align-items: center;
            // 为了图标和文字对齐
            padding: 7px 15px;
            box-sizing: border-box;
            border-radius: 8px;
            background-color: #1677ff;
            color: #fff;
            margin: 40px auto auto;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
    }
}
</style>